<template>
  <van-nav-bar title="体重" left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="ab">
    <div class="ag">
      <div class="l">
        <h1>{{ weight }}</h1>
        <p>体重(kg)</p>
      </div>
      <div class="r">
        <h1>{{ BMI }}</h1>
        <p>BMI</p>
      </div>
    </div>
    <div class="ae">
      <div v-if="BMI < 18.5">
        <p>您体重偏低，需要加强营养</p>
        虽然瘦是大家追求的目标，但是过于消瘦影响身体健康，建议加强营养，补充优质蛋白和足够的热量，适当运动。如果是短期内出现的消瘦，建议去
        医院检查，排除其他疾病引起的消瘦。
      </div>
      <div v-else-if="BMI >= 18.5 && BMI < 25">
        <p>您体重是理想的标准状态</p>
        合理的体重不仅为了美，更重要的是健康，体重大多数情况下能反应一个人的自律程度，请继续保持
        健康合理的生活方式，维持好目前状态。
      </div>
      <div v-else-if="BMI >= 25 && BMI < 30">
        <p>您超重超标，需要减重</p>
        很多慢性病都和体重超标有关，建议低脂饮食，减少主食的摄入，增加蔬菜摄入，每周进行3~5次的有氧运动，来帮助您减轻体重
      </div>
      <div v-else>
        <p>您属于肥胖，体内脂肪堆积</p>
        肥胖也是病，是身体的炎症反应，和心脑血管病息 息相关，建议低脂饮食，减少主食摄入，增加高纤
        维食物，适当运动来减轻体重。
      </div>
    </div>
  </div>
  <div class="af">
    <p><span>近7天记录</span>&emsp;&emsp;&emsp; <span @click="aheav()">查看更多记录</span></p>
    <div ref="main" style="width: 100%; height: 200px"></div>
    <button
      style="
        width: 100%;
        background: greenyellow;
        color: antiquewhite;
        border: none;
        height: 60px;
        text-align: center;
        margin-top: 40px;
      "
      @click="aheavy()"
    >
      手动录入
    </button>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
const router = useRouter()
const main = ref<HTMLDivElement>()
const weight = ref(localStorage.getItem('weight') ?? 0) // 体重
const height = ref(localStorage.getItem('height') ?? 0) // 身高
const BMI = (
  Number(weight.value) /
  ((Number(height.value) * Number(height.value)) / 10000)
).toFixed(2)
const aheavy = () => {
  router.push('/aheavy')
}
const aheav = () => {
  router.push('/aheav')
}
onMounted(() => {
  const myChart = echarts.init(main.value)
  const option = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [new Date().toLocaleDateString()]
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        name: '体重',
        type: 'line',
        stack: 'Total',
        data: [weight.value]
      }
    ]
  }
  myChart.setOption(option)
})
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style>
template {
  background: whitesmoke !important;
}
.ab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 260px;
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 10px;
  overflow: hidden;
  .ae {
    width: 100%;
    height: 180px;
    background: whitesmoke !important;
    margin-top: 20px;
    text-align: left;
    line-height: 40px;
  }
}
.af {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 500px;
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 10px;
}
.ag {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .l {
    width: 50%;
    height: 100%;
    text-align: center;
    float: left;
  }
  .r {
    width: 50%;
    height: 100%;
    text-align: center;
    float: right;
  }
}
</style>
